<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<html>
<head>
  <title>新增/编辑任务类型</title>
  <jsp:include page="/include/common.jsp" />
  <script type="text/javascript" src="<c:url value="/resources/lib/jquery/plugin/jquery.form.min.js" />"></script>
  <script type="text/javascript" src="<c:url value="/resources/js/verify.js" />"></script>
</head>
<body>
<form id="myFormAddUser" name="" method="post" enctype="multipart/form-data">
  <input type="hidden" name="superiorUserId" value="${superiorUserId}"/>
  <table style="text-align: center">
    <tr>
      <td class="item-name">&nbsp;</td>
      <td class="item-value">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitEdit()">提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="closeWindow('#wSuperiorSystemUser')">取消</a>
      </td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td>所有人员</td>
      <td>操作</td>
      <td>已添加人员</td>
      <td>操作</td>
    </tr>
    <tr class = "store_selections">
      <td>
        <div>
          <select name="select1" size="10" multiple="multiple" id="select1" style="width:251px; height:200px;">
            <c:if test="${superiorUsers!=null}">
              <c:forEach var="users" items="${users}">
                <option value="${users.id}" selected="selected">${users.userName}</option>
              </c:forEach>
            </c:if>
          </select>
        </div>
      </td>
      <td>
        <div>
          <div class="btn_wrap" style="margin-top: 60px;"><button id="add" class="mixField" type="button">选中添加</button></div>
          <div class="btn_wrap" style="margin-top: 10px;"><button id="add_all" class="mixField" type="button">全部添加</button></div>
        </div>
      </td>
      <td>
        <div>
          <select name="goods_ids" size="10" multiple="multiple" id="goods_ids" style="width:251px; height:200px;">
            <c:if test="${superiorUsers!=null}">
              <c:forEach var="superiorUsers" items="${superiorUsers}">
                <option value="${superiorUsers.id}" selected="selected">${superiorUsers.userName}</option>
              </c:forEach>
            </c:if>
          </select>
        </div>
      </td>
      <td>
        <div>
          <div class="btn_wrap" style="margin-top: 60px;"><button id="remove" class="mixField" type="button">选中删除</button></div>
          <div class="btn_wrap" style="margin-top: 10px;"><button id="remove_all" class="mixField" type="button">全部删除</button></div>
        </div>
      </td>
    </tr>
  </table>
</form>

<script type="text/javascript">
  $(function(){

    jQuery('#add').click(function() {
      //获取选中的选项，删除并追加给对方
      var select_1= new Array();
      var count = 0;
      jQuery('#select1 option:selected').each(function(){
        select_1[count] = jQuery(this);
        count ++;
      });
      change(select_1,count,true);
    });
    //清除选中
    jQuery('#remove').click(function() {
      var select_1= new Array();
      var count = 0;
      jQuery('#goods_ids option:selected').each(function(){
        select_1[count] = jQuery(this);
        count ++;
      });
      remove_change(select_1,count,true);
    });
    //全部移到右边
    jQuery('#add_all').click(function() {
      //获取全部的选项,删除并追加给对方
      var select_1= new Array();
      var count = 0;
      jQuery('#select1 option').each(function(){
        select_1[count] = jQuery(this);
        count ++;
      });
      change(select_1,count,false);
    });
    //清除全部
    jQuery('#remove_all').click(function() {
      //获取全部的选项,删除并追加给对方
      var select_1= new Array();
      var count = 0;
      jQuery('#goods_ids option').each(function(){
        select_1[count] = jQuery(this);
        count ++;
      });
      remove_change(select_1,count,false);
    });
  })

  function change(select_1,count,flag){
    var good_ids = jQuery('#goods_ids option');
    if(good_ids.val() != undefined){
      for(var i = 0 ;i<count ;i++){
        good_ids.each(function(){
          if( jQuery(this).val()!=select_1[i].val() ){
            jQuery("#select1 option[value='"+select_1[i].val()+"']").remove();
            jQuery("#goods_ids option[value='"+select_1[i].val()+"']").remove();
            jQuery("#goods_ids").append("<option value='"+select_1[i].val()+"'>"+select_1[i].text()+"</option>");
          }
        });
      }
    }else{if(flag)
      jQuery('#select1 option:selected').appendTo('#goods_ids');
    else
      jQuery('#select1 option').appendTo('#goods_ids');
    }
  }

  function remove_change(select_1,count,flag){
    var good_ids = jQuery('#select1 option');
    if(good_ids.val() != undefined){
      for(var i = 0 ;i<count ;i++){
        good_ids.each(function(){
          if( jQuery(this).val()!=select_1[i].val() ){
            jQuery("#goods_ids option[value='"+select_1[i].val()+"']").remove();
            jQuery("#select1 option[value='"+select_1[i].val()+"']").remove();
            jQuery("#select1").append("<option value='"+select_1[i].val()+"'>"+select_1[i].text()+"</option>");
          }
        });
      }
    }else{if(flag)
      jQuery('#goods_ids option:selected').appendTo('#select1');
    else
      jQuery('#goods_ids option').appendTo('#select1');
    }
  }

  function submitEdit(){

    var good_ids = jQuery('#goods_ids option');
    if(good_ids.val() != undefined){
      good_ids.each(function(index, ele){
        jQuery(ele).prop("selected", "true");
      });
    }

    $("#myFormAddUser").form('submit', {
      url: '<c:url value="/web/admin/systemUser/AddUser.action" />',
      onSubmit: function(){
        if("#")
          $.messager.progress({
            title:'操作中',
            msg:'正在操作。。。'
          });
        return true;
      },
      success: function(data){
        $.messager.progress('close');
        if(data==0){
          $("#wSuperiorSystemUser").window('close');
          $('#dgSystemUser').datagrid('reload');
        } else if(data == 1) {
          $.messager.alert("警告提示", "保存失败", 'warning');
        }
      }
    });
  }
</script>

</body>
</html>
